<template>
  <base-page-view class="page-main" :styleText="`background-color: ${!activityEnd&&goodData&&goodData.back_color};`">
    <view class="main" v-if="!activityEnd&&goodData">
      <!-- 活动规则 -->
      <view class="popup-content">
        <view class="popup" v-show="ruleShow">
          <view class="popup-bg"></view>
          <view class="popup-box rule-box">
            <url-image src="/static/images/activity/lottery/close.png" class="close" :back_img="false" :width="42" :height="42" @click="ruleShow=false"></url-image>
            <view class="title-box">
              <url-image src="/static/images/activity/lottery/xian.png" class="tip" :back_img="false" :width="24" :height="16"></url-image>
              <view class="title">活动规则</view>
              <url-image src="/static/images/activity/lottery/xian.png" class="tip" :back_img="false" :width="24" :height="16"></url-image>
            </view>
            <view class="rule-txt">{{goodData.rule}}</view>
          </view>
        </view>
      </view>
      <view class="time-content">
        <view class="left">
          本轮结束仅剩
          <view class="time-box"><text>{{residueTime[0]|zero}}</text>:<text>{{residueTime[1]|zero}}</text>:<text>{{residueTime[2]|zero}}</text></view>
        </view>
        <view class="right" @click="ruleShow=true">
          活动规则
        </view>
      </view>
      <image :src="goodData.cover_imgs" mode="widthFix" class="bg-img" v-if="goodData.cover_imgs"></image>
      <view class="goods-list">
        <view class="goods-box" v-for="(item,index) in goodData.discount_goods_d_t_o_s" :key="index" @click="goodsClick(item)">
          <image :src="item.image" mode="aspectFit" class="goods-img"></image>
          <view class="info-box">
            <view class="title">{{item.name}}</view>
            <view class="sku" v-if="type=='30'">
              <span>{{item.goods_attrs[0].properties_name}}</span>
            </view>
            <view class="price-content">
              <view class="price-box">
                <view class="price" v-if="type=='31'"><text class="symbol">￥</text>{{item.goods_attrs[0].vip_price|formatMoney}}</view>
                <view class="d-price">￥{{item.goods_attrs[0].price|formatMoney}}</view>
              </view>
              <view class="btn" @click.stop.prevent="btnClick(item)">{{type=='30'?'免费领取':'立即购买'}}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 活动结束 -->
    <view class="end-box" v-if="activityEnd">
      <view class="end-item">
        <view class="title">活动结束</view>
        <view class="tip">抱歉活动已结束，敬请期待下次活动</view>
        <url-image src="/static/images/member/member/activity-end.png" mode="widthFix" width="560" height="268"></url-image>
        <view class="btn" @click="$toBackPage()">返回</view>
      </view>
    </view>
  </base-page-view>
</template>

<script>
  import sku_pay_mixin from '@/pagesMember/components/sku_pay_mixin.js'
  import { h5NavigateTo, toFunctionDetail, toGoods } from '@/utils/navigateTo'
  export default {
    mixins: [sku_pay_mixin],
    data() {
      return {
        memberCardType:'',
        type:'30',//30免费领,31低价购
        //商品信息
        goodData:"",
        activityEnd:false,//活动结束
        query:{},
        memberList:[],//限制的会员等级
        remain_time:0,
        nowDate: new Date().getTime(), //当前时间戳
        ruleShow:false,
        myInterval:'',//定时器
      }
    },
    onLoad(option) {
      if(option.type){
        this.type=option.type
      }
      if(option.memberCardType){
        this.memberCardType=option.memberCardType;
      }
      uni.setNavigationBarTitle({
        title: this.type=='30'?'免费领':'低价购'
      });
    },
    onShow() {
      this.getDiscount();
    },
    onPullDownRefresh() {
      this.getDiscount();
    },
    filters:{
      zero(data){
        if(data<10){
          return '0'+data;
        }else if(!data){
          return '00';
        }else{
          return data
        }
      }
    },
    computed:{
      residueTime() {
        let stamp=this.remain_time;
        if (stamp <= 0) {
          stamp = 0
        }
        var second = Math.floor(stamp / 1000);
        var day = Math.floor(second / 3600 / 24);
        var hr = Math.floor(second / 3600 % 24);
        var min = Math.floor(second / 60 % 60);
        var sec = Math.floor(second % 60);
        return [hr , min , sec];
      },
    },
    methods: {
      getNowDate() {
        clearInterval(this.myInterval);
        this.myInterval=setInterval(() => {
          this.remain_time-=1000;
          if(this.remain_time<0){
            this.activityEnd=true;
            clearInterval(this.myInterval);
          }
          this.$on('hook:deactivated', () => {
            clearInterval(this.myInterval);                                    
          })
        }, 1000)
      },
      //查询优惠商品
      async getDiscount(){
        await this.$api.goodsApi.getDiscountGoods({
          discountType:this.type,
          memberCardType:this.memberCardType
        }).then(res=>{
          if(res.code===0&&res.data){
            this.goodData=res.data;
            this.remain_time=res.data.remain_millis_second_before_end;
            this.memberList=res.data.limit_member_card_type.split(",");
            this.getNowDate();
            uni.setNavigationBarTitle({
                title: this.goodData?.name
            });
            let time=new Date();
            if(!this.goodData||!this.goodData.discount_goods_d_t_o_s||this.goodData.discount_goods_d_t_o_s.length==0||(new Date(this.goodData.start_time*1000) > time || time > new Date(this.goodData.end_time*1000))){
              this.activityEnd=true;
            }else{
              this.activityEnd=false;
            }
          }else{
            this.activityEnd=true;
          }
          setTimeout(function() {
            uni.stopPullDownRefresh()
          }, 500)
        });
      },
      goodsClick(item){
        console.log(item);
        if(!this.token){
          this.$navigateTo('/pages/login/index');
          return;
        }
        if(!this.memberList.some(x=>x==this.userInfo.current_member_card_type)){
          this.$msg('抱歉您未达到参与活动的条件');
          return;
        }
        if(this.type=='31'){
          toGoods(item);
        }else{
          return
        }
      },
      btnClick(item){
        console.log(item);
        if(!this.token){
          this.$navigateTo('/pages/login/index');
          return;
        }
        if(!this.memberList.some(x=>x==this.userInfo.current_member_card_type)){
          this.$msg('抱歉您未达到参与活动的条件');
          return;
        }
        //低价购
        if(this.type=='31'){
          toGoods(item);
        }
        //免费领
        else if(this.type=='30'){
          this.goBuy(item);
        }
      },
      async goBuy(goods){
        let shopping_list=[{
          goods_id: goods.goods_id,
          sku_code: goods.goods_attrs[0].sku_code,
          num: 1,
          goods_type: goods.type,
          activity_id: goods.activity_id,
          from_type: '30'
        }];
        shopping_list=JSON.stringify(shopping_list);//下单和$store缓存的shopping_list需要都是字符串，下单页会报错
        let settleData = {
          is_used_coupon: 0,
          shopping_list: shopping_list,
          shipping_address_id: ''
        }
        console.log(settleData);
        const res = await this.$api.orderApi.orderSettle(settleData)
        this.$store.dispatch('setGoodsTemp', {
          shopping_list: shopping_list,
          data: res.data,
          settleData
        })
        if (res.code || !res || !res.data) {
          return
        }
        this.$navigateTo('/pagesOrder/orderCheck/index')
      }
    }
  }
</script>

<style lang="scss" scoped>
::v-deep{
  .page-main{
    min-height: 100%;
  }
}
.page-main{
  min-height: 100%;
}
.time-content{
  position: fixed;
  top: 0rpx;
  width: 100%;
  height: 77rpx;
  background: #FFFFFF;
  opacity: 0.74;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 100;
  padding: 0rpx 26rpx 0rpx 30rpx;
  .left{
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #000000;
    display: flex;
    align-items: center;
    .time-box{
      margin-left: 15rpx;
      display: flex;
      align-items: center;
      line-height: 36rpx;;
      text{
        width: 38rpx;
        height: 36rpx;
        background: #000000;
        border-radius: 6rpx;
        color: white;
        text-align: center;
        font-size: 22rpx;
        margin: 0rpx 6rpx;
      }
    }
  }
  .right{
    color: #666666;
    font-size: 26rpx;
  }
}
.end-box{
  position: fixed;
  top: 0rpx;
  left: 0rpx;
  right: 0rpx;
  bottom: 0rpx;
  background: rgba(0,0,0,0.6);
  z-index: 10000;
  .end-item{
    width: 642rpx;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: white;
    border-radius: 20rpx;
    padding: 0rpx 41rpx 50rpx;
    text-align: center;
    .title{
      font-size: 40rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
      line-height: 1;
      margin-top: 50rpx;
    }
    .tip{
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #666666;
      margin: 44rpx 0rpx 44rpx;
      line-height: 1;
    }
    .btn{
      background: url('https://asset-uat.bisinuolan.cn/bixuan_uni/static/images/member/member/activity-btn.png') no-repeat;
      background-size: 100% auto;
      width: 500rpx;
      height: 84rpx;
      color: white;
      margin: 20rpx auto 0rpx;
      // display: flex;
      // align-items: center;
      // justify-content: center;
      // font-size: 32rpx;
      line-height: 84rpx;
      text-align: center;
    }
  }
}
.main{
  padding-bottom: 77rpx;
  min-height: 100%;
}
.bg-img{
  width: 100%;
}
.goods-list{
  padding: 0rpx 20rpx 0rpx;
  .goods-box{
    background: #FFFFFF;
    border-radius: 11rpx;
    padding: 20rpx;
    display: flex;
    margin-bottom: 20rpx;
    .goods-img{
      width: 200rpx;
      height: 200rpx;
      display: block;
      flex-shrink:0;
      margin-right: 22rpx;
    }
    .info-box{
      position: relative;
      flex: 1;
      .title{
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box; 		//对象作为伸缩盒子模型显示
        -webkit-box-orient: vertical; //设置或检索伸缩盒对象的子元素的排列方式
        -webkit-line-clamp: 2;  	//显示的行数
        overflow: hidden;//隐藏超出的内容 
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #000000;
      }
      .sku{
        font-size: 22rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 1;
        margin-top: 15rpx;
      }
      .price-content{
        display: flex;
        justify-content: space-between;
        position: absolute;
        bottom: 0rpx;
        width: 100%;
        align-items: center;
        .price-box{
          display: flex;
          align-items: center;
          .price{
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #000000;
            margin-right: 12rpx;
            .symbol{
              font-size: 18rpx;
              font-family: PingFang SC;
              font-weight: 400;
              color: #000000;
            }
          }
          .d-price{
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 400;
            text-decoration: line-through;
            color: #999999;
          }
        }
        .btn{
          background: #FFFFFF;
          border: 1rpx solid #E21536;
          border-radius: 6rpx;
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #E11435;
          padding: 12rpx 33rpx 15rpx;
        }
      }
    }
  }
}
.popup-content{
  .popup{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
  }
  .popup-bg{
    background-color: rgba(0,0,0,0.6);
    width: 100%;
    height: 100%;
  }
  .popup-box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 580rpx;
    background-color: white;
    border-radius: 20rpx;
  }
  .close{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -120rpx;
  }
  .rule-box{
    padding: 60rpx 51rpx;
    .title-box{
      display: flex;
      align-items: center;
      justify-content: center;
      .title{
        font-weight: bold;
        color: #333333;
        font-size: 32rpx;
        margin: 0rpx 23rpx;
      }
    }
    .rule-txt{
      margin-top: 40rpx;
      word-wrap: break-word;
      word-break: break-all;
      white-space: pre-wrap;
      line-height: 2;
    }
  }
}
</style>
